<template>
  <div class="comparison">
    <div v-if="availableFiles.length < 2" class="no-files">
      <div class="no-files-icon">📁</div>
      <h3>需要至少两个文件才能进行对比</h3>
      <p>请先上传两个或更多 HAR 文件，然后返回此页面进行对比分析</p>
      <div class="file-count">
        <span>当前已上传 {{ availableFiles.length }} 个文件</span>
        <span v-if="availableFiles.length === 0">请先上传文件</span>
        <span v-else-if="availableFiles.length === 1">还需要 1 个文件</span>
      </div>
    </div>
    
    <div v-else-if="!comparisonResult" class="no-comparison">
      <div class="no-comparison-icon">📊</div>
      <h3>开始性能对比分析</h3>
      <p>选择两个 HAR 文件进行对比分析</p>
      <div class="file-selectors">
        <div class="file-selector">
          <label>基准文件</label>
          <select :value="baselineFileId" @change="harStore.setBaselineFile(($event.target as HTMLSelectElement).value); updateComparison()">
            <option value="">请选择基准文件</option>
            <option 
              v-for="file in availableFiles" 
              :key="file.id" 
              :value="file.id"
            >
              {{ file.name }} ({{ formatFileSize(file.size) }})
            </option>
          </select>
        </div>
        <div class="file-selector">
          <label>对比文件</label>
          <select :value="targetFileId" @change="harStore.setTargetFile(($event.target as HTMLSelectElement).value); updateComparison()">
            <option value="">请选择对比文件</option>
            <option 
              v-for="file in availableFiles" 
              :key="file.id" 
              :value="file.id"
            >
              {{ file.name }} ({{ formatFileSize(file.size) }})
            </option>
          </select>
        </div>
      </div>
      <button 
        @click="startComparison" 
        :disabled="!canCompare"
        class="compare-btn"
      >
        开始对比
      </button>
    </div>
    
    <div v-else class="comparison-results">
      <!-- 文件选择信息 -->
      <div class="file-selection-info">
        <div class="selection-header">
          <h2>性能对比分析</h2>
          <div class="file-info">
            <span>已上传 {{ availableFiles.length }} 个文件</span>
            <span>可选择任意两个文件进行对比</span>
          </div>
        </div>
        <div class="selected-files">
          <div class="file-display">
            <div class="file-item">
              <div class="file-label">基准文件</div>
              <div class="file-name">{{ getSelectedFileName(baselineFileId) }}</div>
              <button @click="showFileSelector('baseline')" class="change-file-btn">重新选择</button>
            </div>
            <div class="vs-divider">VS</div>
            <div class="file-item">
              <div class="file-label">对比文件</div>
              <div class="file-name">{{ getSelectedFileName(targetFileId) }}</div>
              <button @click="showFileSelector('target')" class="change-file-btn">重新选择</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 文件选择器模态框 -->
      <div v-if="showSelector" class="file-selector-modal">
        <div class="modal-overlay" @click="hideFileSelector"></div>
        <div class="modal-content">
          <div class="modal-header">
            <h3>选择{{ selectorType === 'baseline' ? '基准' : '对比'}}文件</h3>
            <button @click="hideFileSelector" class="close-btn">×</button>
          </div>
          <div class="modal-body">
            <div class="file-list">
              <div 
                v-for="file in availableFiles" 
                :key="file.id"
                @click="selectFile(file.id)"
                class="file-option"
                :class="{ 
                  'selected': (selectorType === 'baseline' ? baselineFileId : targetFileId) === file.id,
                  'disabled': isFileDisabled(file.id)
                }"
              >
                <div class="file-icon">📄</div>
                <div class="file-details">
                  <div class="file-name">{{ file.name }}</div>
                  <div class="file-meta">{{ formatFileSize(file.size) }} • {{ formatDate(file.uploadTime) }}</div>
                </div>
                <div v-if="(selectorType === 'baseline' ? baselineFileId : targetFileId) === file.id" class="selected-icon">✓</div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button @click="hideFileSelector" class="cancel-btn">取消</button>
            <button @click="confirmFileSelection" class="confirm-btn" :disabled="!selectedFileId">确认选择</button>
          </div>
        </div>
      </div>

      <!-- 对比概览 -->
      <div class="comparison-overview">
        <h2>对比分析结果</h2>
        <div class="overview-cards">
          <div class="overview-card">
            <div class="card-title">总体改善评分</div>
            <div class="card-value" :class="getScoreClass(comparisonResult.summary.overallImprovement)">
              {{ comparisonResult.summary.overallImprovement.toFixed(1) }}
            </div>
            <div class="card-subtitle">满分 100</div>
          </div>
          <div class="overview-card">
            <div class="card-title">时间改善</div>
            <div class="card-value" :class="getImprovementClass(comparisonResult.differences.timeImprovement)">
              {{ formatPercentage(comparisonResult.differences.timeImprovement) }}
            </div>
            <div class="card-subtitle">平均响应时间</div>
          </div>
          <div class="overview-card">
            <div class="card-title">大小减少</div>
            <div class="card-value" :class="getImprovementClass(comparisonResult.differences.sizeReduction)">
              {{ formatPercentage(comparisonResult.differences.sizeReduction) }}
            </div>
            <div class="card-subtitle">总资源大小</div>
          </div>
          <div class="overview-card">
            <div class="card-title">请求减少</div>
            <div class="card-value" :class="getImprovementClass(comparisonResult.differences.requestReduction)">
              {{ formatPercentage(comparisonResult.differences.requestReduction) }}
            </div>
            <div class="card-subtitle">总请求数量</div>
          </div>
        </div>
      </div>
      
      <!-- 详细对比 -->
      <div class="detailed-comparison">
        <h3>详细对比</h3>
        <div class="comparison-grid">
          <div class="comparison-section">
            <h4>性能指标对比</h4>
            <div class="metrics-comparison">
              <div class="metric-row">
                <span class="metric-label">总请求数</span>
                <div class="metric-values">
                  <span class="baseline-value">{{ comparisonResult.baseline.metrics.totalRequests }}</span>
                  <span class="arrow">→</span>
                  <span class="target-value">{{ comparisonResult.target.metrics.totalRequests }}</span>
                </div>
              </div>
              <div class="metric-row">
                <span class="metric-label">总大小</span>
                <div class="metric-values">
                  <span class="baseline-value">{{ formatFileSize(comparisonResult.baseline.metrics.totalSize) }}</span>
                  <span class="arrow">→</span>
                  <span class="target-value">{{ formatFileSize(comparisonResult.target.metrics.totalSize) }}</span>
                </div>
              </div>
              <div class="metric-row">
                <span class="metric-label">平均响应时间</span>
                <div class="metric-values">
                  <span class="baseline-value">{{ formatTime(comparisonResult.baseline.metrics.averageResponseTime) }}</span>
                  <span class="arrow">→</span>
                  <span class="target-value">{{ formatTime(comparisonResult.target.metrics.averageResponseTime) }}</span>
                </div>
              </div>
              <div class="metric-row">
                <span class="metric-label">缓存命中率</span>
                <div class="metric-values">
                  <span class="baseline-value">{{ comparisonResult.baseline.metrics.cacheHitRate.toFixed(1) }}%</span>
                  <span class="arrow">→</span>
                  <span class="target-value">{{ comparisonResult.target.metrics.cacheHitRate.toFixed(1) }}%</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="comparison-section">
            <h4>网络时间对比</h4>
            <div class="metrics-comparison">
              <div class="metric-row">
                <span class="metric-label">DNS 时间</span>
                <div class="metric-values">
                  <span class="baseline-value">{{ formatTime(comparisonResult.baseline.metrics.averageDnsTime) }}</span>
                  <span class="arrow">→</span>
                  <span class="target-value">{{ formatTime(comparisonResult.target.metrics.averageDnsTime) }}</span>
                </div>
              </div>
              <div class="metric-row">
                <span class="metric-label">连接时间</span>
                <div class="metric-values">
                  <span class="baseline-value">{{ formatTime(comparisonResult.baseline.metrics.averageConnectTime) }}</span>
                  <span class="arrow">→</span>
                  <span class="target-value">{{ formatTime(comparisonResult.target.metrics.averageConnectTime) }}</span>
                </div>
              </div>
              <div class="metric-row">
                <span class="metric-label">SSL 时间</span>
                <div class="metric-values">
                  <span class="baseline-value">{{ formatTime(comparisonResult.baseline.metrics.averageSslTime) }}</span>
                  <span class="arrow">→</span>
                  <span class="target-value">{{ formatTime(comparisonResult.target.metrics.averageSslTime) }}</span>
                </div>
              </div>
              <div class="metric-row">
                <span class="metric-label">TTFB</span>
                <div class="metric-values">
                  <span class="baseline-value">{{ formatTime(comparisonResult.baseline.metrics.averageTtfb) }}</span>
                  <span class="arrow">→</span>
                  <span class="target-value">{{ formatTime(comparisonResult.target.metrics.averageTtfb) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 关键洞察 -->
      <div class="insights-section">
        <h3>关键洞察</h3>
        <div class="insights-list">
          <div 
            v-for="(insight, index) in comparisonResult.summary.keyInsights" 
            :key="index"
            class="insight-item"
          >
            <div class="insight-icon">💡</div>
            <div class="insight-text">{{ insight }}</div>
          </div>
        </div>
      </div>
      
      <!-- 优化建议 -->
      <div class="recommendations-section">
        <h3>优化建议</h3>
        <div class="recommendations-list">
          <div 
            v-for="(recommendation, index) in comparisonResult.summary.recommendations" 
            :key="index"
            class="recommendation-item"
          >
            <div class="recommendation-icon">🔧</div>
            <div class="recommendation-text">{{ recommendation }}</div>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <button @click="exportComparison" class="export-btn">导出对比报告</button>
        <button @click="resetComparison" class="reset-btn">重新对比</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import type { HarFile, ComparisonResult } from '../types/har';
import { compareHarFiles } from '../utils/compareHar';
import { useHarStore } from '../stores/harStore';

// Props
interface Props {
  files: HarFile[];
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  'comparison-completed': [result: ComparisonResult];
}>();

// Store
const harStore = useHarStore();

// Reactive data
const showSelector = ref<boolean>(false);
const selectorType = ref<'baseline' | 'target'>('baseline');
const selectedFileId = ref<string>('');

// Computed
const availableFiles = computed(() => props.files);
const baselineFileId = computed(() => harStore.baselineFileId.value);
const targetFileId = computed(() => harStore.targetFileId.value);
const comparisonResult = computed(() => harStore.comparisonResult.value);

const canCompare = computed(() => {
  return harStore.canStartComparison.value;
});

// Methods
function updateComparison() {
  if (canCompare.value) {
    startComparison();
  }
}

function startComparison() {
  if (!canCompare.value) return;
  
  const baselineFile = availableFiles.value.find(f => f.id === baselineFileId.value);
  const targetFile = availableFiles.value.find(f => f.id === targetFileId.value);
  
  if (!baselineFile || !targetFile) return;
  
  try {
    const result = compareHarFiles(baselineFile, targetFile);
    harStore.setComparisonResult(result);
    emit('comparison-completed', result);
  } catch (error) {
    console.error('对比分析失败:', error);
  }
}

function resetComparison() {
  harStore.clearComparisonSelection();
  harStore.clearComparison();
}

function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function formatTime(ms: number): string {
  if (ms < 1000) return `${ms.toFixed(0)}ms`;
  return `${(ms / 1000).toFixed(2)}s`;
}

function formatPercentage(value: number): string {
  const sign = value >= 0 ? '+' : '';
  return `${sign}${value.toFixed(1)}%`;
}

function getScoreClass(score: number): string {
  if (score >= 80) return 'score-excellent';
  if (score >= 60) return 'score-good';
  if (score >= 40) return 'score-fair';
  return 'score-poor';
}

function getImprovementClass(value: number): string {
  if (value > 0) return 'improvement-positive';
  if (value < 0) return 'improvement-negative';
  return 'improvement-neutral';
}

function exportComparison() {
  if (!comparisonResult.value) return;
  
  const report = {
    comparison: comparisonResult.value,
    generatedAt: new Date().toISOString(),
    summary: {
      overallScore: comparisonResult.value.summary.overallImprovement,
      keyInsights: comparisonResult.value.summary.keyInsights,
      recommendations: comparisonResult.value.summary.recommendations
    }
  };
  
  const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `har_comparison_${Date.now()}.json`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// 新增方法
function getSelectedFileName(fileId: string): string {
  if (!fileId) return '未选择';
  const file = availableFiles.value.find(f => f.id === fileId);
  return file ? file.name : '未找到文件';
}

function showFileSelector(type: 'baseline' | 'target') {
  selectorType.value = type;
  selectedFileId.value = type === 'baseline' ? baselineFileId.value : targetFileId.value;
  showSelector.value = true;
}

function hideFileSelector() {
  showSelector.value = false;
  selectedFileId.value = '';
}

function selectFile(fileId: string) {
  if (isFileDisabled(fileId)) return;
  selectedFileId.value = fileId;
}

function isFileDisabled(fileId: string): boolean {
  // 如果选择的是另一个文件类型，则禁用
  if (selectorType.value === 'baseline' && fileId === targetFileId.value) return true;
  if (selectorType.value === 'target' && fileId === baselineFileId.value) return true;
  return false;
}

function confirmFileSelection() {
  if (!selectedFileId.value) return;
  
  if (selectorType.value === 'baseline') {
    harStore.setBaselineFile(selectedFileId.value);
  } else {
    harStore.setTargetFile(selectedFileId.value);
  }
  
  // 重新进行对比
  if (canCompare.value) {
    startComparison();
  }
  
  hideFileSelector();
}

function formatDate(date: Date): string {
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).format(date);
}
</script>

<style scoped>
.comparison {
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  background: var(--background);
}

.no-files {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500px;
  color: var(--text-secondary);
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  padding: 40px;
}

.no-files-icon {
  font-size: 80px;
  margin-bottom: 24px;
  opacity: 0.6;
  animation: float 3s ease-in-out infinite;
}

.no-files h3 {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.no-files p {
  margin: 0 0 24px 0;
  font-size: 16px;
  color: var(--text-secondary);
}

.file-count {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-hover);
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.file-count span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.no-comparison {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500px;
  color: var(--text-secondary);
  text-align: center;
}

.no-comparison-icon {
  font-size: 80px;
  margin-bottom: 24px;
  opacity: 0.6;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.no-comparison h3 {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.no-comparison p {
  margin: 0 0 32px 0;
  font-size: 16px;
  color: var(--text-secondary);
}

.file-selectors {
  display: flex;
  gap: 32px;
  margin: 32px 0;
  background: var(--surface);
  padding: 32px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.file-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.file-selector label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-selector label::before {
  content: '📁';
  font-size: 14px;
}

.file-selector select {
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  background: var(--surface);
  color: var(--text-primary);
  transition: var(--transition);
  font-weight: 500;
}

.file-selector select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.compare-btn {
  padding: 16px 32px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: var(--shadow-md);
  margin-top: 16px;
}

.compare-btn:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.compare-btn:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-sm);
}

.comparison-results {
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: fadeIn 0.3s ease-out;
}

/* 文件选择信息样式 */
.file-selection-info {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(255, 255, 255, 0.9) 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.file-selection-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--primary-500), var(--accent-500));
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}

.selection-header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--text-primary), var(--primary-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.file-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.file-info span {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.selected-files {
  position: relative;
  z-index: 1;
}

.file-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--surface-hover) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-width: 200px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.file-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
  opacity: 0;
  transition: all var(--transition);
}

.file-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: var(--primary-300);
}

.file-item:hover::before {
  opacity: 1;
}

.file-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

.file-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  word-break: break-all;
  position: relative;
  z-index: 1;
}

.change-file-btn {
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, var(--primary-500), var(--accent-500));
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.change-file-btn:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--accent-600));
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

.vs-divider {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary-500);
  background: linear-gradient(135deg, var(--primary-500), var(--accent-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-full);
  border: 3px solid var(--primary-200);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 文件选择器模态框样式 */
.file-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}

.modal-content {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-radius: var(--radius-2xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
  animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--primary-50), var(--accent-50));
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--surface-hover);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: var(--error-100);
  color: var(--error-600);
  transform: scale(1.1);
}

.modal-body {
  padding: var(--space-6);
  max-height: 400px;
  overflow-y: auto;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.file-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  background: var(--surface);
}

.file-option:hover:not(.disabled) {
  border-color: var(--primary-300);
  background: var(--primary-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.file-option.selected {
  border-color: var(--primary-500);
  background: var(--primary-100);
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.1);
}

.file-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-hover);
}

.file-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.file-details {
  flex: 1;
  min-width: 0;
}

.file-details .file-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  word-break: break-all;
}

.file-meta {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.selected-icon {
  color: var(--primary-500);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--surface-hover);
}

.cancel-btn,
.confirm-btn {
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  min-width: 80px;
}

.cancel-btn {
  background: var(--surface);
  color: var(--text-secondary);
  border: 2px solid var(--border);
}

.cancel-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
}

.confirm-btn {
  background: linear-gradient(135deg, var(--primary-500), var(--accent-500));
  color: white;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-600), var(--accent-600));
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

.confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.comparison-overview {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.comparison-overview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.comparison-overview::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.comparison-overview h2 {
  margin: 0 0 32px 0;
  color: var(--text-primary);
  font-size: 32px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comparison-overview h2::before {
  content: '📊';
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  animation: pulse 2s ease-in-out infinite;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  position: relative;
  z-index: 1;
}

.overview-card {
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.overview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  opacity: 0;
  transition: all 0.3s ease;
}

.overview-card::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
  border-radius: 22px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: -1;
}

.overview-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.overview-card:hover::before {
  opacity: 1;
}

.overview-card:hover::after {
  opacity: 1;
}

.card-title {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #64748b, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-value {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.score-excellent { 
  color: #10b981;
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.score-good { 
  color: #0ea5e9;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.score-fair { 
  color: #f59e0b;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.score-poor { 
  color: #ef4444;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.improvement-positive { 
  color: #10b981;
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.improvement-negative { 
  color: #ef4444;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.improvement-neutral { 
  color: #6b7280;
  background: linear-gradient(135deg, #6b7280, #9ca3af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-subtitle {
  font-size: 14px;
  color: #64748b;
  font-weight: 600;
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #64748b, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.detailed-comparison {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.detailed-comparison::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #8b5cf6 100%);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.detailed-comparison h3 {
  margin: 0 0 32px 0;
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detailed-comparison h3::before {
  content: '📈';
  font-size: 20px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  animation: pulse 2s ease-in-out infinite;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 32px;
  position: relative;
  z-index: 1;
}

.comparison-section {
  background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.comparison-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 20px 20px 0 0;
}

.comparison-section:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.comparison-section h4 {
  margin: 0 0 24px 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.metrics-comparison {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.metric-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  opacity: 0;
  transition: all 0.3s ease;
}

.metric-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: #3b82f6;
}

.metric-row:hover::before {
  opacity: 1;
}

.metric-label {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 15px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #1e293b, #475569);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-values {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.baseline-value {
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-width: 80px;
  text-align: center;
}

.arrow {
  color: #3b82f6;
  font-weight: 800;
  font-size: 18px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.target-value {
  color: #1e293b;
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #93c5fd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-width: 80px;
  text-align: center;
}

.insights-section,
.recommendations-section {
  background: var(--surface);
  padding: 32px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.insights-section h3,
.recommendations-section h3 {
  margin: 0 0 20px 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.insights-section h3::before {
  content: '💡';
  font-size: 18px;
}

.recommendations-section h3::before {
  content: '🔧';
  font-size: 18px;
}

.insights-list,
.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insight-item,
.recommendation-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--surface-hover);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--primary-color);
  transition: var(--transition);
}

.insight-item:hover,
.recommendation-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--primary-hover);
}

.insight-icon,
.recommendation-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.insight-text,
.recommendation-text {
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 15px;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

.export-btn,
.reset-btn {
  padding: 16px 32px;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.export-btn {
  background: var(--success-color);
  color: white;
}

.export-btn:hover {
  background: #059669;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.reset-btn {
  background: var(--text-muted);
  color: white;
}

.reset-btn:hover {
  background: #6b7280;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .comparison {
    padding: 16px;
  }
  
  .file-selectors {
    flex-direction: column;
    gap: 20px;
    padding: 24px;
  }
  
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .overview-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }
  
  .overview-card {
    padding: 20px;
  }
  
  .card-value {
    font-size: 28px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 12px;
  }
  
  .export-btn,
  .reset-btn {
    width: 100%;
  }
}

/* 动画效果 */
.overview-card {
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.overview-card:nth-child(1) { animation-delay: 0.1s; }
.overview-card:nth-child(2) { animation-delay: 0.2s; }
.overview-card:nth-child(3) { animation-delay: 0.3s; }
.overview-card:nth-child(4) { animation-delay: 0.4s; }

.comparison-section {
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.comparison-section:nth-child(1) { animation-delay: 0.2s; }
.comparison-section:nth-child(2) { animation-delay: 0.4s; }

.metric-row {
  animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.metric-row:nth-child(1) { animation-delay: 0.1s; }
.metric-row:nth-child(2) { animation-delay: 0.2s; }
.metric-row:nth-child(3) { animation-delay: 0.3s; }
.metric-row:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 成功状态指示器 */
.overview-card.positive::before {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  opacity: 0.3;
}

.overview-card.negative::before {
  background: linear-gradient(135deg, #fecaca, #fca5a5);
  opacity: 0.3;
}

/* 加载状态 */
.comparison.loading {
  opacity: 0.7;
  pointer-events: none;
}

.comparison.loading::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid var(--border);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 1000;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
